<template>
  <div id="mycontrolgroupmm" class="column22 grid22">

    <div class="ui input">
      权限组名称：  <input type="text" placeholder="" id="control_group_name"
                     v-model="$store.state.module_permission.control_group.name"
                     :value="$store.state.module_permission.control_group.name">
    </div>

    <br>
    <div class="ui input">
      权限组描述：  <input type="text" placeholder="" id="control_group_title"
                     v-model="$store.state.module_permission.control_group.depict"
                     :value="$store.state.module_permission.control_group.depict">
    </div>
    <br>
    <hr>
    <br>

    <!--<input type="checkbox" @click="checkall">-->
    <!--<label>全选</label>-->

    <!--<hr>-->
    <div class="ui checkbox22   column grid mycheckbox" v-for="(item,index) in $store.state.module_permission.loopData">


      <div v-for="x in item.level">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>


      <input type="checkbox" @click="checkme" :checked="$store.state.module_permission.loopData[index].check"
             :data-id="item.id">
      <label>{{item.name}}</label>


    </div>


    <button v-if="onsubmit" class="ui loading button control_group_submit">Load</button>
    <button v-else class="control_group_submit  ui primary button" @click="submitme">提交</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import util from '_util/index';
  export default{

    data(){
      return {
        //   path:this.$route.path
        cgname2: 222,
        onsubmit: false
      }
    },
    methods: {

      checkme(env){
        var id = env.target.getAttribute('data-id');
        var checked = env.target.checked;

        this.$store.dispatch('module_permission/checkme', {id: id, check: checked});
      },
      checkall(env){
        var checked = env.target.checked;
        this.$store.dispatch('module_permission/checkall', {check: checked})
      },
      submitme(){
        this.$set(this.$data, 'onsubmit', true)
        let type = 'add'
        if (this.$route.query.id > 0) {
          type = 'update'
        }

        this.$store.dispatch('module_permission/submitme',
          {
            name: $("#control_group_name").val(),
            depict: $("#control_group_title").val(),
            id: this.$route.query.id,
            type: type
          }).then(msg => {
          let status = 'success'

          if (msg != 'ok') {

            status = 'error'
          }

          if (msg == 'ok') {
            this.$set(this.$data, 'onsubmit', false)
            msg = '操作成功！'
          }
          util.showMsg(this, status, msg)
        });


      }


    },
    components: {},
    created(){
      //console.log('create')
      if (this.$route.query.id) {
        this.$store.dispatch('module_permission/initEdit', {id: this.$route.query.id})
      } else {
        this.$store.dispatch('module_permission/initAdd');
      }
    },
    mounted(){
      //console.log(this.$route.path)
    },
    computed: {
      path(){
        return this.$route.path
      }

    },
    watch: {
      path: function (val, old) {

        if (val != old) {
          console.log('ctl')
          if (this.$route.query.id) {
            this.$store.dispatch('module_permission/initEdit', {id: this.$route.query.id})
          } else {
            this.$store.dispatch('module_permission/initAdd');
          }

        }
      }
    }

  }

</script>

<style rel="stylesheet/less" lang="less">
  .mycheckbox {
    display: flex !important;
    input[type=checkbox] {
      margin: 0;
      padding: 0;

      position: inherit !important;
    }
  }

  .lastcheckbox {

    input[type=checkbox] {
      margin: 0;
      padding: 0;
      position: inherit !important;
    }

  }

  button.ui.loading.button.control_group_submit {
    position: fixed;
    bottom: 0px;
    left: 10%;
  }

  button.control_group_submit.ui.primary.button {
    position: fixed;
    bottom: 30px;
    left: 20%;
  }

  #mycontrolgroupmm {
    padding-left: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
</style>
